<template>
    <view class="search-box">
        <input 
            type="text" 
            class="search-input" 
            :placeholder="placeholder" 
            confirm-type="search" 
            @confirm="onSearch"
            :value="value"
            @input="onInput"
        />
        <text class="search-icon">🔍</text>
    </view>
</template>

<script>
export default {
    name: 'SearchBox',
    props: {
        placeholder: {
            type: String,
            default: '搜索'
        },
        value: {
            type: String,
            default: ''
        }
    },
    methods: {
        onSearch(e) {
            const keyword = e.detail.value;
            this.$emit('search', keyword);
        },
        onInput(e) {
            const value = e.detail.value;
            this.$emit('input', value);
        }
    }
}
</script>

<style scoped>
.search-box {
    width: 100%;
    height: 80rpx;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fe 100%);
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    position: relative;
    box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.12);
    border: 2rpx solid rgba(102, 126, 234, 0.1);
    margin-bottom: 24rpx;
    transition: all 0.3s ease;
}

.search-box:focus-within {
    box-shadow: 0 6rpx 24rpx rgba(102, 126, 234, 0.2);
    border-color: rgba(102, 126, 234, 0.3);
    transform: translateY(-2rpx);
}

.search-input {
    flex: 1;
    height: 100%;
    font-size: 28rpx;
    padding-right: 60rpx;
    color: #2c3e50;
    background: transparent;
}

.search-input::placeholder {
    color: #95a5a6;
}

.search-icon {
    position: absolute;
    right: 30rpx;
    font-size: 32rpx;
    color: #667eea;
}
</style>
